<template>
  <div>
    <!--nav-->
    <div class="cagenav">
      <div class="cageback" @click="health">{{navback}}</div>
      <div class="cageheadline">{{navheadline}}</div>
    </div>
    <!--photo-->
    <ul>
      <li class="fruitPh" v-for="fruitDa in fruitData">
        <img :src="fruitDa.fruitImg"/>
        <p>{{fruitDa.fruitText}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
      name:'cagefruit',
      data(){
          return{
              navback:'<',
              navheadline:'健康',
              fruitData:[
                {fruitImg:'../../static/img/fruit1.png',
                 fruitText:'六一节后来一杯满足你少女心的透心凉饮料——自制水果冰块'
                },
                {fruitImg:'../../static/img/fruit2.png',
                  fruitText:'夏季胃口大拯救之香草水果沙拉'
                },
                {fruitImg:'../../static/img/fruit3.png',
                  fruitText:'清新菠萝炒饭'
                },
                {fruitImg:'../../static/img/fruit4.png',
                  fruitText:'水果的一些别有洞天吃法'
                },
                {fruitImg:'../../static/img/fruit5.png',
                  fruitText:'酸甜有道的香橙柠檬烤鸡'
                },
                {fruitImg:'../../static/img/fruit6.png',
                  fruitText:'内陷巨丰富的香橙平果馅油炸饼'
                },
              ]
          }
      },
    methods:{
          health(){
              this.$router.go(-1)
          }
    }
  }
</script>
<style scoped lang="less">
  @import'../assets/css/reset.css';
  @import '../assets/css/cagefruit.less';
</style>
